<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>

<HTML>
    <BODY>
        <div id="tt" style="position:relative;">
            <input type="button" value="添加附件" onmouseover="floatFile()">
            <br>
            <div id="div1">
                <div id="file1text" ></div>
                <input  id="file1" name="myfile" type="file" style="position:absolute;filter:width:30px;opacity: 0"  >
            </div>
        </div>
    </BODY>
</HTML>
<SCRIPT language="JavaScript">
    function $(id)
    {
        return document.getElementById(id);
    }
    //全局变量，记录文件数；
    var fileNum=1;
    //mouseover时，把input file移到按扭上，保证点击的是file，
    function floatFile()
    {   
        $("file"+fileNum).style.posTop=event.srcElement.offsetTop;
        $("file"+fileNum).style.posLeft=event.x-$("file"+fileNum).offsetWidth/2;
    }
    //选择完一个文件之后，自动创建一个新的div 和 file表单，用于下回使用，hidden刚用过的file
    function showText(obj)
    {
        $(obj.id+"text").innerHTML=obj.value+"&nbsp;&nbsp;<a href='javascript:del("+fileNum+")'>删除</a>";
        $("file"+fileNum).style.display='none';
        fileNum=fileNum+1;
        //直接追加innerHTML(innerHTML+=)会清空原来file中的内容
        $("div"+(fileNum-1)).insertAdjacentHTML('AfterEnd','<div id="div'+fileNum+'"><div id="file'+fileNum+'text" ></div><input id="file'+fileNum+'" name="myfile" type="file"  onchange="showText(this)"  style="position:absolute;filter:alpha(opacity=0);width:30px;"hidefocus></div>');
    }
   
 
</SCRIPT>